<!--
 * @Author       : 方远 15668450208@163.com
 * @Date         : 2024-04-13 17:56:26
 * @LastEditors  : 方远 15668450208@163.com
 * @LastEditTime : 2024-07-31 10:46:53
 * @FilePath     : \zhlx-autoform-ui\src\components\ZHLX-Components\ZHLX-unitSelect\index.vue
 * @Description  : 介绍文件的作用
 * 
 * Copyright (c) 2024 by zhlx - 15668450208@163.com, All Rights Reserved. 
-->
<template>
  <el-date-picker ref="fieldEditor" :type="type" v-model="modelVal"
                  :class="dateRangeClass"
                  :disabled="disabled" :readonly="readonly"
                  :clearable="clearable" :editable="editable"
                  :format="format" :value-format="valueFormat" 
                  :time-format="format.split(' ')[1]"
                  :start-placeholder="startPlaceholder || i18nt('render.hint.startDatePlaceholder')"
                  :end-placeholder="endPlaceholder || i18nt('render.hint.endDatePlaceholder')"
                  @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
                  @change="handleChangeEvent" :shortcuts="shortcuts">
  </el-date-picker>
</template>

<script>
import i18n, {translate} from "@/utils/i18n";
export default {
  name: "ZHLX-dateRange",
  mixins: [i18n],
  props: {
    modelValue: {
      default: () => [],
    },
    type: {
      default: "daterange",
      type: String,
    },
    dateRangeClass: {
      default: "",
      type: String,
    },
    disabled: {
      default: false,
      type: Object,
    },
    readonly: {
      default: false,
      type: Object,
    },
    clearable: {
      default: true,
      type: Object,
    },
    editable: {
      default: false,
      type: Object,
    },
    format: {
      default: "YYYY-MM-DD",
      type: String,
    },
    valueFormat: {
      default: "YYYY-MM-DD",
      type: String,
    },
    startPlaceholder: {
      default: "",
      type: String,
    },
    endPlaceholder: {
      default: "",
      type: String,
    },
  },
  data() {
    return {
      shortcuts: [
        {
          text: '全天',
          value: () => {
            const start = new Date(new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate() + " 08:30:00")
            const end = new Date()
            end.setTime(start.getTime() + 3600 * 1000 * 9)
            return [start, end]
          },
        },
        {
          text: '上午',
          value: () => {
            const start = new Date(new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate() + " 08:30:00")
            const end = new Date()
            end.setTime(start.getTime() + 3600 * 1000 * 3.5)
            return [start, end]
          },
        },
        {
          text: '下午',
          value: () => {
            const start = new Date(new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate() + " 12:00:00")
            const end = new Date()
            end.setTime(start.getTime() + 3600 * 1000 * 5.5)
            return [start, end]
          },
        },
        {
          text: '一小时',
          value: () => {
            const start = new Date()
            const end = new Date()
            end.setTime(start.getTime() + 3600 * 1000 * 1)
            return [start, end]
          },
        },
        {
          text: '两小时',
          value: () => {
            const start = new Date()
            const end = new Date()
            end.setTime(start.getTime() + 3600 * 1000 * 2)
            return [start, end]
          },
        },
        {
          text: '半小时',
          value: () => {
            const start = new Date()
            const end = new Date()
            end.setTime(start.getTime() + 3600 * 1000 * 0.5)
            return [start, end]
          },
        },
        {
          text: '一刻钟',
          value: () => {
            const start = new Date()
            const end = new Date()
            end.setTime(start.getTime() + 3600 * 1000 * 0.25)
            return [start, end]
          },
        },
      ]
    };
  },
  computed: {
    modelVal: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      },
    },
  },
  methods: {
    handleFocusCustomEvent (event) {
      this.$emit("focus", event)
    },
    handleBlurCustomEvent (event) {
      this.$emit("blur", event)
    },
    handleChangeEvent (event) {
      this.$emit("change", event)
    },
  },
};
</script>

<style scoped lang="scss">
.auto-full-width {
  width: 100%;

  :deep(.el-date-editor) {
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }

  :deep(.el-range__icon) {
    margin-left: 10px;
  }
}
</style>